<!--  -->
<template>
  <div class="app-container">
    <el-form :inline="true" size="small">
      <el-form-item label="门店名称">
        <el-input
          v-model="kwd2"
          placeholder="请输入账号名称"
          size="small"
        ></el-input>
      </el-form-item>

      <el-button icon="el-icon-search" type="primary" size="small" @click='search'
        >搜索</el-button
      >
      <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
      <el-button icon="el-icon-edit" type="warning" size="small" @click="add"
        >新增</el-button
      >
    </el-form>
    <el-table :data="tableData" border stripe>
      <template v-for="(i, index) in columns">
        <el-table-column
          :prop="i.data"
          :key="i.id"
          :label="i.label"
          align="center"
          :width="i.width"
        />
      </template>
      <template v-for="(i, index) in 3">
        <el-table-column align="center" :key="index" label="预约时间段">
          <div slot-scope="scope">
            {{ tableData[scope.$index].bookItem[index].bTime }}
          </div>
        </el-table-column>
        <el-table-column align="center" label="可预约单数">
          <div slot-scope="scope">
            {{ tableData[scope.$index].bookItem[index].bCount }}
          </div>
        </el-table-column>
      </template>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-search"
            @click="edit( scope.row)"
            >查看</el-button
          >

          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            style="color: #f56c6c"
            @click="deleteCate(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showDialog"
      width="50%"
      @close="showDialog = false"
    >
      <div class="dBox">
        <div class="dList">
          <div class="dLabel">门店名称</div>
          <div class="dCon">{{form.shop}}</div>
        </div>
        
        <div class="dList">
          <div class="dLabel">支付方式</div>
          <div class="dCon">{{form.payment}}</div>
        </div>

        <template v-for="i in form.bookItem">
          <div class="dList">
            <div class="dLabel">可预约时间段</div>
            <div class="dCon">{{i.bTime}}</div>
          </div>
          <div class="dList">
            <div class="dLabel">可预约单数</div>
            <div class="dCon">{{i.bCount}}</div>
          </div>
        </template>
      </div>
      <span slot="footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="">确定</el-button>
      </span>
    </el-dialog>

    <!-- 新增 -->
    <el-dialog title="新增" :visible.sync="showAdd" width="50%" @close="">
      <setting-dia
        :sOpt="sOpt"
        :form="form"
        :modes="modes"
        @addMode="addMode"
        @delMode="delMode"
      ></setting-dia>
    </el-dialog>
  </div>
</template>

<script>
// import { getArticle } from "@/api/article";
import settingDia from "./dia";
export default {
  name: "slider",
  components: { settingDia },
  data() {
    return {
      kwd2: "",
      dialogTitle: "创建",
      showDialog: false,
      showAdd: false,
      form: {},
      sOpt: [
        { value: "1", label: "门店A" },
        { value: "2", label: "门店b" },
        { value: "3", label: "门店c" },
      ],
      modes: [{ value: "", startTime: "", endTime: "" }],
      Popt: [
        {
          value: 1,
          label: "支付方式1",
        },
        {
          value: 2,
          label: "支付方式2",
        },
      ],
      tableData: [
        {
          payment: "线上支付",
          name: "门店名称1",
          bTime: "2021-02-21",
          shop: "门店1",
          bookItem: [
            {
              bTime: "2021-02-21",
              bCount: 30,
            },
            {
              bTime: "2021-02-21",
              bCount: 30,
            },
            {
              bTime: "2021-02-21",
              bCount: 30,
            },
          ],
        },
        {
          payment: "线上支付",
          name: "门店名称2",
          shop: "门店2",
          bookItem: [
            {
              bTime: "2021-02-21",
              bCount: 320,
            },
            {
              bTime: "2021-02-21",
              bCount: 30,
            },
            {
              bTime: "2021-02-21",
              bCount: 320,
            },
          ],
        },
        {
          payment: "线上支付",
          name: "门店名称3",
          bTime: "2021-02-21",
          shop: "门店3",
          bookItem: [
            {
              bTime: "2021-02-21",
              bCount: 330,
            },
            {
              bTime: "2021-02-21",
              bCount: 30,
            },
            {
              bTime: "2021-02-21",
              bCount: 330,
            },
          ],
        },
      ],
      columns: [
        { key: 0, label: `门店名称`, data: "name", width: "150" },
        { key: 1, label: `支付方式`, data: "payment", visible: true },
      ],
    };
  },
  created() {},
  methods: {
    add() {
      this.form = {};
      this.showAdd = true;
    },
    addMode() {
      this.modes.push({ value: "", startTime: "", endTime: "" });
    },
    delMode(i) {
      this.modes.splice(i, 1);
    },
    edit(i) {
      this.form = i;
      this.showDialog = true;
    },
    del(i, d) {
      this.$confirm("确认删除所选数据？", "确认删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(i, 1);
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
.slideImg {
  width: 140px;
}
</style>
